<template>
  <div id="note" class="detail">
    <note-sidebar @update:notes="val => notes = val"></note-sidebar>
    <div class="note-detail">
      <div class="note-empty" v-show="!curNote.id">请选择笔记</div>
      <div class="note-detail-ct" v-show="curNote.id">
        <div class="note-bar">
          <span>创建日期:{{ curNote.createdAtFriendly }}</span>
          <span>更新日期:{{ curNote.updatedAtFriendly }}</span>
          <span>{{ statusText }}</span>
          <span class="iconfont icon-delete" @click="onDeleteNote"></span>
          <span class="iconfont" :class="isShowPreview?'icon-edit':'icon-eye'"
                @click="isShowPreview = !isShowPreview"></span>
        </div>
        <div class="note-title">
          <input type="text" v-model="curNote.title" @input="onUpdateNote" @keydown="statusText='正在输入...'"
                 placeholder="输入标题">
        </div>
        <div class="editor">
          <textarea v-show="!isShowPreview" v-model="curNote.content" @input="onUpdateNote"
                    @keydown="statusText='正在输入...'"
                    placeholder="输入内容，支持markdown语法"></textarea>
          <div class="preview markdown-body" v-html="previewContent" v-show="isShowPreview"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NoteSidebar from '@/components/NoteSidebar'
import _ from 'lodash'
import MarkdownIt from 'markdown-it'
import {mapActions, mapGetters, mapMutations} from 'vuex'
import Auth from '@/apis/author'

let md = new MarkdownIt()

export default {
  components: {
    NoteSidebar
  },
  data() {
    return {
      statusText: '笔记未改动',
      isShowPreview: false
    }
  },
  created() {
    Auth.getInfo().then(res => {
      if (!res.isLogin) {
        this.$router.push({path: '/login'})
      }
    })
  },
  computed: {
    ...mapGetters([
      'notes',
      'curNote'
    ]),
    previewContent() {
      return md.render(this.curNote.content || '')
    }
  },
  methods: {
    ...mapMutations([
      'setCurNote'
    ]),
    ...mapActions([
      'updateNote',
      'deleteNote',
    ]),
    onUpdateNote: _.debounce(function () {
      if (!this.curNote.id) return
      this.updateNote({noteId: this.curNote.id, title: this.curNote.title, content: this.curNote.content})
          // eslint-disable-next-line no-unused-vars
          .then(data => {
            this.statusText = '已保存'
            // eslint-disable-next-line no-unused-vars
          }).catch(data => {
        this.statusText = '保存出错'
      })
    }, 300),
    onDeleteNote() {
      this.deleteNote({noteId: this.curNote.id})
          // eslint-disable-next-line no-unused-vars
          .then(data => {
            this.$router.replace({path: '/note'})
          })
    }
  },
  // eslint-disable-next-line no-unused-vars
  beforeRouteUpdate(to, from) {
    this.setCurNote({curNoteId: to.query.noteId})
  }
}
</script>

<style lang="less">
@import url(../assets/css/note-detail);

#note {
  display: flex;
  align-items: stretch;
  background-color: #fff;
  flex: 1;
}
</style>